<template>
    <el-header>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1"><router-link to="/">Home</router-link></el-menu-item>
        <el-menu-item index="2" v-if="!isLoggedIn"><router-link to="/login">Login</router-link></el-menu-item>
        <el-menu-item index="3" v-if="!isLoggedIn"><router-link to="/register">Register</router-link></el-menu-item>
        <el-menu-item index="4" v-if="isLoggedIn"><router-link to="/profile">Profile</router-link></el-menu-item>
        <el-menu-item index="5" v-if="isLoggedIn && isAdmin"><router-link to="/admin">Admin</router-link></el-menu-item>
        <el-menu-item index="6" v-if="isLoggedIn" @click="logout">Logout</el-menu-item>
      </el-menu>
    </el-header>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  import { useAuthStore } from '@/stores/authStore';
  import { useRouter } from 'vue-router';
  
  const authStore = useAuthStore();
  const router = useRouter();
  
  const isLoggedIn = computed(() => authStore.isLoggedIn);
  const isAdmin = computed(() => authStore.user?.role === 1);
  
  const logout = () => {
    authStore.logout();
    router.push('/');
  };
  </script>
  
  
  
  <style>
  /* 在这里添加 CSS 样式 */
  </style>
  